<template>
  <router-layout>
    <div class="container">
      <div class="content-box">
        <div class="type-box">
          <div class="tip-text">
            <van-icon class="warning-o" name="warning-o"/>
            <p>上传生育证照片(支持jpg、gif、png格式，大小不超过5M)</p>
          </div>
          <div class="img-box">
            <div class="photo-box">
              <van-icon
                v-if="form.improvement_scheme"
                class="cross"
                name="cross"
                @click.stop="form.improvement_scheme=''"
              />
              <img
                v-if="form.improvement_scheme"
                :src="form.improvement_scheme"
                width="100%"
                @click="seeImg('marry')"
                alt
              >
              <van-uploader
                class="photograph-box"
                v-else
                :after-read="onReadMarry"
                accept="image/*"
              >
                <div class="photograph">
                  <van-icon class="plus" name="plus"/>
                  <p>点击上传</p>
                </div>
              </van-uploader>
            </div>
            <p class="tips-text">请注意姓名，证件号清晰(非必传)</p>
          </div>
        </div>
        <div class="type-box">
          <div class="tip-text">
            <van-icon class="warning-o" name="warning-o"/>
            <p>上传出生证照片(支持jpg、gif、png格式，大小不超过5M)</p>
          </div>
          <div class="img-box">
            <div class="photo-box">
              <van-icon
                v-if="form.file_path"
                class="cross"
                name="cross"
                @click.stop="form.file_path =''"
              />
              <img
                v-if="form.file_path"
                :src="form.file_path"
                width="100%"
                @click="seeImg('just')"
                alt
              >
              <van-uploader
                class="photograph-box"
                v-else
                :after-read="onReadJust"
                accept="image/*"
              >
                <div class="photograph">
                  <van-icon class="plus" name="plus"/>
                  <p>点击上传</p>
                </div>
              </van-uploader>
            </div>
            <p class="tips-text">点击上传出生证(必传)</p>
          </div>
        </div>
        <div class="form-box">
          <p class="form-text">基础信息</p>
          <van-cell-group>
            <van-field v-model="form.create_username" label="姓名" disabled placeholder="请输入姓名"/>
            <section @click="show=!show">
              <van-field v-model="form.dept_name" label="部门" disabled placeholder="请选择部门"/>
            </section>
          </van-cell-group>
        </div>
      </div>
      <div class="base van-hairline--top">
        <div class="base-btn" @click="onSubmit">
          <p>提交审核</p>
        </div>
      </div>
      <van-popup v-if="dataList.length>1" v-model="show" position="bottom">
        <van-picker show-toolbar :columns="columns" @cancel="show=!show" @confirm="onConfirm"/>
      </van-popup>
    </div>
  </router-layout>
</template>

<script>
import other from "@/utils/other";
import { ImagePreview } from "vant";
import { getToken } from "@/utils/auth";
 import { Debounce, Throttle } from "@/utils";
import { marry_finddeptById, marry_save } from "@/api/equity";
import { proposal_save } from "@/api/proposal";

export default {
  name: "MarryConsolation",
  data() {
    return {
      departmentName:"",
      show: false,
      form: {
        create_username:"",
        file_path: "",
        dept_name:"",
        improvement_scheme: "",
        benefit_calculation: "",
        moule_id: 2,
        proposal_title: '生育福利',
        company_id: localStorage.getItem("companyId")
      },
      user: JSON.parse(localStorage.getItem("user")),
      columns: [],
      dataList:[]
    };
  },
  methods: {
    onReadMarry(file) {
      if (file.file.size > 5 * 1024 * 1024) {
        this.$toast("不能上传超过5M");
        return;
      }
      this.form.improvement_scheme = file.content;
      let config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          Authorization: getToken() || localStorage.getItem("token")
        }
      };
      let fd = new FormData();
      fd.append("file_path", file.file);
      this.$toast.loading({
        duration: 0,
        forbidClick: true,
        message: '上传中...'
      });
      this.$http.post("/login/reception/fileUpload", fd, config).then(res => {
        let ret = res.data;
        if (ret.status === 100) {
          let ossHost = "https://saic-public-2.oss-cn-shanghai.aliyuncs.com/";
          let imgUrl = `${ossHost}${ret.data.file_path}`;
          this.form.improvement_scheme = imgUrl;
          this.$toast.clear()
          this.$toast.success("上传成功");
        } else {
          this.$toast.clear()
          this.$toast.fail("上传失败");
        }
      });
    },
    onReadJust(file) {
      if (file.file.size > 5 * 1024 * 1024) {
        this.$toast("不能上传超过5M");
        return;
      }
      let config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          Authorization: getToken() || localStorage.getItem("token")
        }
      };
      let fd = new FormData();
      fd.append("file_path", file.file);
      this.form.file_path = file.content;
      this.$toast.loading({
        duration: 0,
        forbidClick: true,
        message: '上传中...'
      });
      this.$http.post("/login/reception/fileUpload", fd, config).then(res => {
        let ret = res.data;
        if (ret.status === 100) {
          let ossHost = "https://saic-public-2.oss-cn-shanghai.aliyuncs.com/";
          let imgUrl = `${ossHost}${ret.data.file_path}`;
          this.form.file_path = imgUrl;
          this.$toast.clear()
          this.$toast.success("上传成功");
        } else {
          this.$toast.clear()
          this.$toast.fail("上传失败");
        }
      });
    },
    onReadBack(file) {
      if (file.file.size > 5 * 1024 * 1024) {
        this.$toast("不能上传超过5M");
        return;
      }
      let config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          Authorization: getToken() || localStorage.getItem("token")
        }
      };
      let fd = new FormData();
      fd.append("file_path", file.file);
      this.form.idCard_back = file.content;
      this.$toast.loading({
        duration: 0,
        forbidClick: true,
        message: '上传中...'
      });
      this.$http.post("/login/reception/fileUpload", fd, config).then(res => {
        let ret = res.data;
        if (ret.status === 100) {
          let ossHost = "https://saic-public-2.oss-cn-shanghai.aliyuncs.com/";
          let imgUrl = `${ossHost}${ret.data.file_path}`;
          this.form.idCard_back = imgUrl;
          this.$toast.clear()
          this.$toast.success("上传成功");
        } else {
          this.$toast.clear()
          this.$toast.fail("上传失败");
        }
      });
    },
    seeImg(e) {
      let imgList = "";
      if (e == "marry") {
        imgList = this.form.improvement_scheme;
      }
      if (e == "just") {
        imgList = this.form.file_path;
      }
      if (e == "back") {
        imgList = this.form.idCard_back;
      }
      ImagePreview({
        images: [imgList],
        lazyLoad: false,
        showIndex: false
      });
    },
    out() {
      other.inputBlur();
    },
    // 选择部门
    onConfirm(value, index) {
      this.departmentName = value.text;
      this.form.dept_ids = value.id;
      this.show = false;
    },
    onSubmit:Throttle(function() {
      this.save();
    },1000),
    async save() {
      // if (!this.form.improvement_scheme) {
      //   this.$toast("请上传生育证");
      //   return;
      // }
      if (!this.form.file_path) {
        this.$toast("请上传出生证");
        return;
      }
      if (!this.form.dept_name) {
        this.$toast("请选择部门");
        return;
      }
      try {
        let query = Object.assign({}, this.form);
        let { data } = await proposal_save(query);
        if (data.status == 100) {
          this.$toast("数据提交成功,请耐心等待审核");
          this.form = {
            name: data.data.user.user_name,
            improvement_scheme: "",
            file_path: "",
            moule_id: 2
          }
          this.initList()
        }
      } catch (error) {
        this.$toast(error.data.msg);
      }

    },
    // 获取部门
    async initList() {
      let par = { user_id: this.user.id };
      let { data } = await marry_finddeptById(par);
      if (data.status == 100) {
        this.form.create_username = data.data.user_name
        this.dataList = data.data.array
        this.columns = []
        if (data.data.array.length == 1) {
          this.form.dept_name = data.data.array[0].dept_name
        }
        if (data.data.array.length > 1) {
          data.data.array.forEach(ele => {
            this.columns.push({
              text: ele.dept_name,
              id: ele.id
            })
          })
        }
      }
    }
  },
  created() {
    this.initList();
  }
};
</script>

<style lang="scss" scoped>
.content-box {
  position: absolute;
  top: 0;
  left: 0px;
  right: 0px;
  bottom: 60px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.tip-text {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #fff6e7;
  font-size: 12px;
  color: #ffa512;
  .warning-o {
    font-size: 16px;
    padding-right: 10px;
  }
}
.img-box {
  padding: 15px 40px;
}
.img-box2 {
  padding: 0 40px;
}
.photo-box {
  position: relative;
  width: 288px;
  height: 180px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px dashed #dedede;
  background-color: #f7f7f7;
  // box-shadow: 0px 0px 1px 1px #ccc;
  .photograph-box {
    width: 100%;
    height: 100%;
  }
  .photograph {
    color: #dcdfe6;
    font-size: 12px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .plus {
      font-size: 40px;
    }
  }
}
.cross {
  font-size: 22px;
  position: absolute;
  top: 10px;
  left: 10px;
}
.tips-text {
  text-align: center;
  padding: 5px 0 0;
  // color: #f44;
}
.form-box {
  margin: 15px 0 30px;
  .form-text {
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 14px;
    background: #fafafa;
  }
}
.base {
  background: #fff;
  position: fixed;
  bottom: 0;
  padding: 12px 12px;
  width: 100%;
  .base-btn {
    height: 36px;
    width: 90%;
    margin-left: 5%;
    background-image: linear-gradient(-90deg, #ff5453 0%, #ffaf77 100%);
    border-radius: 4px;
    font-family: PingFangSC-Medium;
    font-size: 16px;
    text-align: center;
    line-height: 36px;
    color: #ffffff;
  }
}
</style>

